<template>
  <div class="fy-home">
    <div class="fy-home-menu">
      <FyMenu @refresh="loadData"></FyMenu>
    </div>
    <div class="fy-home-content">
      <fy-table ref="FyTableRef">
        <template #edit_name="{ row }">
          <vxe-input type="text" v-model="row.name" @input="handleInput(row)" />
        </template>
        <template #name="{ row }">
          {{ row.name }}
        </template>
        <template #sex="{ row, column }">
          {{ getLabelByValue(column.editRender.options, row.sex) }}
        </template>
        <template #edit_sex="{ row, column }">
          <vxe-select v-model="row.sex">
            <vxe-option v-for="item in column.editRender.options" :key="item.value" :value="item.value"
              :label="item.label"></vxe-option>
          </vxe-select>
        </template>
      </fy-table>
    </div>
  </div>



</template>

<script>
import FyTable from '@/components/vxeTable.vue'
import FyMenu from '@/components/menu/index.vue'
import { getLabelByValue } from '@/utils/options'

export default {
  name: 'FyTablePage',
  components: {
    FyTable,
    FyMenu
  },
  props: [''],
  data() {
    return {
      loading: false
    };
  },


  computed: {},

  created() { },

  mounted() {
    console.log(this.$route, 'route=---------------')

    // if(!menuFormId) {
    //   this.$router.replace({ name: 'FyTablePage', params: { ...this.$route.params, menuFormId: '123' } })
    // }
  },

  methods: {
    getLabelByValue,
    loadData(){
      this.$refs.FyTableRef?.loadData(true)
    },
    content() {
      return 'content'
    },
    handleInput(row) {
      console.log(row, 'row===========')
    },
    test(row, column) {
      console.log(row, column)
      return ''
    }
  },
  watch: {
    '$route': {
      handler() { 
        this.$refs.FyTableRef?.loadData(true)
      }
    }
  }

}

</script>
<style lang='scss' scoped>
.fy-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 10px;

  .fy-home-menu {
    width: 200px;
    height: 100%;
  }

  .fy-home-content {
    flex: 1;
    height: 100%;
  }
}
</style>